<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useMessage} from "naive-ui";
import {loadingBar} from "../HomeView_N.vue"

const containerRef = ref(void 0);
const numberAnimationInstRef = ref(null);
const message = useMessage();
const loginUser = ref(getUser());

const orderArr = ref([]);
const loadOrder = () => {
  axios({
    method: "get",
    url: BASE_URL+"/v1/order/select?userId="+loginUser.value.userId
  }).then(res => {
    if (res.data.code === 2000) {
      orderArr.value = res.data.data;
      console.log(orderArr.value);
      loadingBar.finish();
    } else {
      message.error("获取订单失败咯~");
    }
  })
}


onMounted(()=>{
  loginUser.value = getUser();
  loadOrder();
})

</script>

<template>
  <div style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5">
    <img src="/background.webp">
  </div>
  <div ref="containerRef" style="width: 100%; padding: 20px 200px;box-sizing: border-box;">
    <div style="margin-bottom: 80px">
      <n-flex style="">
        <!--    左边导航栏-->
        <n-flex vertical style="width: 15%;height: auto;">
          <n-card style="overflow: hidden">
            <n-statistic label="你一共发布了" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="orderCount" />
              <template #suffix>
                条订单
              </template>
            </n-statistic>
            <n-space vertical>
              今天你又点了几单呢
            </n-space>
          </n-card>
          <n-card style="overflow: hidden" v-show="loginUser.level == 20">
            <n-statistic label="你一共完成了" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="complitedCount" />
              <template #suffix>
                条订单
              </template>
            </n-statistic>
            <n-space vertical>
              花时间、花精力、花心思，愿你每一份努力都不负所望
            </n-space>
          </n-card>
          <el-affix :offset="70" target=".n-scrollbar-container">
            <n-card :bordered="false">
              <n-flex vertical>
                <router-link to="/user" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                  <n-button quaternary style="width: 100%;">
                    个人中心
                  </n-button>
                </router-link>
                <router-link to="/message" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                  <n-button quaternary style="width: 100%;">
                    我的消息
                  </n-button>
                </router-link>
                <router-link to="/setting" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                  <n-button quaternary style="width: 100%;">
                    设置中心
                  </n-button>
                </router-link>
                <router-link to="/order" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                  <n-button quaternary style="width: 100%;">
                    订单中心
                  </n-button>
                </router-link>
              </n-flex>
            </n-card>
          </el-affix>
        </n-flex>

        <!--    中间信息-->
        <n-flex style="width: 80%;height: 100%;">
          <n-card style="overflow: hidden;padding-top: 150px">
            <div style="position: absolute;top: 0;left: 0; width: 100%;height: 300px;overflow:hidden;background-color: #FB7299;">
              <n-image src="/user/七七.webp" width="100%" height="100%" style="position: absolute;top: -250px"></n-image>
            </div>
            <n-avatar round :size="160" src="/messageAvatar/头像.jpg"></n-avatar>
            <div>
              <div>
                <span style="font-size: 3em">{{loginUser.nickname}}</span>
                <span style="font-size: 20px">
                  <el-icon v-show="loginUser.gender == '男'" style="color: #0aa1ed"><Male /></el-icon>
                  <el-icon v-show="loginUser.gender == '女'" style="color: #FB7299"><Female /></el-icon>
                </span><br>
                <span>@{{loginUser.username}}  |  </span><span>{{loginUser.email}}</span><br>
                <n-ellipsis expand-trigger="click" line-clamp="2" :tooltip="false" style="max-width: 300px">
                  {{loginUser.description}}
                </n-ellipsis>
              </div>
            </div>
            <n-divider title-placement="left">
              今天你点单了吗？
            </n-divider>
            <n-list hoverable clickable>
              <n-list-item v-for="order in orderArr">
                <n-avatar round></n-avatar>
                <n-thing :title="order.orderTitle" content-style="margin-top: 10px;">
                  <template #description>
                    <n-space size="small" style="margin-top: 4px">
                      <n-tag :bordered="false" type="success" size="small">
                        {{order.startLocation}}
                      </n-tag>
                      <n-tag :bordered="false" type="success" size="small">
                        {{order.orderType}}
                      </n-tag>
                      <n-rate allow-half readonly :value="order.orderRate"/>
                    </n-space>
                  </template>
                  {{order.orderReview}}
                </n-thing>
              </n-list-item>
            </n-list>
          </n-card>
        </n-flex>

        <!--    右边返回顶部-->
        <n-back-top :right="100" />
      </n-flex>
    </div>
  </div>
</template>

<style scoped>

</style>